利用内在和外在尺寸关键词，释放 CSS Grid 轨道尺寸的强大功能。学习如何为不同的内容和屏幕尺寸创建灵活、响应式的布局。
CSS Grid 轨道尺寸：精通内在与外在尺寸控制
CSS Grid 布局是创建复杂响应式网页布局的强大工具。其主要优势之一在于其灵活的轨道尺寸调整功能，让您能够精确控制行和列的大小。理解不同的轨道尺寸关键词和函数对于构建适应性强且易于维护的布局至关重要。本文深入探讨 CSS Grid 中内在尺寸和外在尺寸的高级概念，探索它们如何让您创建能够优雅地适应各种内容和屏幕尺寸的布局。
理解网格轨道与尺寸
在深入探讨内在和外在尺寸的具体细节之前，我们先来回顾一下 CSS Grid 轨道的基本概念。
什么是网格轨道？
网格轨道是网格布局的行和列。它们定义了网格项目所放置的结构。这些轨道的尺寸直接影响整体布局以及内容在网格中的分布方式。
指定轨道尺寸
您可以使用 grid-template-rows 和 grid-template-columns 属性来定义轨道尺寸。这些属性接受一个以空格分隔的值列表，其中每个值代表相应轨道的大小。例如：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
这段代码创建了一个三列两行的网格。第一列和第三列各占可用空间的 1 个分数单位（fr），而第二列占 2 个分数单位。行的大小则根据其内容自动确定。
内在尺寸 vs. 外在尺寸
高级网格轨道尺寸的核心在于理解内在尺寸和外在尺寸之间的区别。这些概念决定了轨道的尺寸如何根据其内容和可用空间来确定。
内在尺寸：内容驱动
内在尺寸意味着网格轨道的大小由放置在该轨道内的网格项目的内容决定。轨道会扩展或收缩以适应内容，直至达到某些限制。内在尺寸关键词包括：
auto：默认值。轨道尺寸由轨道中网格项目贡献的最大最小尺寸决定。在大多数情况下，这实际上意味着轨道将足够大以容纳所有内容而不会溢出，但它可能会受到网格项目上设置的min-width/min-height值的影响。min-content：轨道尺寸被设置为内容在不溢出的情况下所需的最小空间。例如，文本会在最小可能的位置换行，即使这样会笨拙地断开单词。max-content：轨道尺寸被设置为内容在不溢出的情况下所需的最大空间。对于文本来说，这意味着它会尽可能避免换行，这可能导致轨道变得非常宽或高。fit-content(length)：轨道尺寸被设置为max-content和指定length两者中较小的一个。这允许您为轨道设置一个最大尺寸，同时仍然允许它根据其内容缩小。
示例：使用 min-content 和 max-content 的内在尺寸
设想一个有两列的场景。第一列使用 min-content 调整尺寸，第二列使用 max-content。如果第一列的内容是一个长单词，它将在任何可能的位置被断开以适应最小内容尺寸。而第二列则会扩展以容纳内容而不换行。
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
grid-gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 2;
}
<div class="grid-container">
<div class="item1">Supercalifragilisticexpialidocious</div>
<div class="item2">Short text</div>
</div>
在这个例子中，“Supercalifragilisticexpialidocious” 这个词将在第一列中被分成多行，而“Short text”将在第二列中保持单行。这展示了内在尺寸如何适应内容的固有尺寸要求。
示例：使用 fit-content() 的内在尺寸
当你希望一个轨道尺寸由内容决定，但又想有一个最大尺寸限制时，`fit-content()` 函数非常有用。这可以用来防止列或行变得过大，同时在内容较小时仍允许它们收缩。
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-gap: 10px;
}
在这个例子中，第一列将扩展以适应其内容，但宽度不会超过 200px。第二列将占据剩余的空间。这对于创建那些希望某一列灵活但又不想占用太多空间的布局很有用。
外在尺寸：空间驱动
另一方面，外在尺寸意味着网格轨道的大小由内容之外的因素决定，例如网格容器中的可用空间或一个固定的尺寸值。外在尺寸关键词包括：
length：一个固定的长度值（例如，100px,2em,50vh）。轨道的大小将精确地是这个值，无论内容如何。percentage：网格容器尺寸的百分比（例如，50%）。轨道将占据可用空间的这个百分比。fr(分数单位)：代表在所有其他轨道确定尺寸后，网格容器中可用空间的一部分。这是在轨道之间分配空间最灵活的方式。
示例：使用 fr 单位的外在尺寸
fr 单位对于创建适应不同屏幕尺寸的响应式布局非常有价值。通过为轨道分配分数单位，您可以确保它们按比例共享可用空间。
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
在这个例子中，网格容器有两列。第一列占据可用空间的 1 个分数单位，而第二列占据 2 个分数单位。如果网格容器宽 600px，则第一列将是 200px 宽，第二列将是 400px 宽（减去任何网格间距）。这确保了无论屏幕尺寸如何，列都始终保持其比例关系。
示例：使用百分比和固定长度的外在尺寸
.grid-container {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-gap: 10px;
}
在这个例子中，第一列被设置为 200px 的固定宽度。第二列将占据网格容器宽度的 50%。最后，第三列使用 1fr 单位，因此它将占据前两列确定尺寸后剩余的任何空间。
结合内在与外在尺寸：minmax()
minmax() 函数允许您结合内在和外在尺寸，从而对轨道尺寸进行更精细的控制。它为轨道定义了一个可接受的尺寸范围，同时指定了最小值和最大值。
minmax(min, max)
min：轨道的最小尺寸。这可以是任何有效的轨道尺寸值，包括内在关键词（auto,min-content,max-content）或外在值（length,percentage,fr）。max：轨道的最大尺寸。这也可以是任何有效的轨道尺寸值。如果 `max` 小于 `min`，那么 `max` 将被忽略，并使用 `min`。
示例：使用 minmax() 创建响应式列
minmax() 的一个常见用例是创建具有最小宽度但可以扩展以填充可用空间的响应式列。
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
在这里，repeat(auto-fit, minmax(200px, 1fr)) 创建了尽可能多的列，这些列的宽度至少为 200px，但可以扩展以填充剩余空间。auto-fit 关键词确保空列被折叠，从而创建一个灵活且响应式的布局。
示例：将 minmax() 与内在尺寸结合使用
.grid-container {
display: grid;
grid-template-columns: minmax(min-content, 300px) 1fr;
grid-gap: 10px;
}
在这个例子中，第一列的宽度至少与其最小内容尺寸相同，但不会超过 300px。第二列将占据剩余的空间。
实际应用与最佳实践
理解内在和外在尺寸对于创建健壮且适应性强的布局至关重要。以下是一些实际应用和最佳实践，请牢记：
- 响应式导航： 使用
minmax()创建具有最小宽度但可以扩展以填充导航栏中可用空间的导航项。 - 灵活的卡片布局： 采用
repeat(auto-fit, minmax())创建可自动适应不同屏幕尺寸的卡片布局，确保卡片在较小屏幕上能够优雅地换行。 - 内容感知的侧边栏： 使用
min-content或max-content根据侧边栏的内容来确定其尺寸，使其能够根据需要扩展或收缩。 - 避免固定宽度： 尽量减少使用固定宽度（
px），而倾向于使用相对单位（%,fr,em），以创建能适应不同屏幕尺寸和用户偏好的布局。 - 充分测试： 始终在各种设备和屏幕尺寸上测试您的网格布局，以确保它们正确渲染并提供一致的用户体验。
高级网格尺寸技术
除了基本的关键词和函数，CSS Grid 还提供了更高级的技术来微调轨道尺寸。
repeat() 函数
repeat() 函数简化了创建多个具有相同尺寸的轨道的过程。它接受两个参数：重复次数和轨道尺寸。
repeat(number, track-size)
例如：
grid-template-columns: repeat(3, 1fr);
这等同于：
grid-template-columns: 1fr 1fr 1fr;
repeat() 函数还可以与 auto-fit 和 auto-fill 关键词一起使用，以创建能自动适应可用空间的响应式网格布局。
auto-fit 和 auto-fill 关键词
这些关键词与 repeat() 函数一起使用，以创建能适应网格中项目数量和可用空间的响应式网格。它们之间的主要区别在于处理空轨道的方式。
auto-fit：如果所有轨道都是空的，那么这些轨道将折叠为 0 宽度。auto-fill：如果所有轨道都是空的，那么这些轨道将保留其尺寸。
示例：使用 auto-fit 实现响应式列
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
在这个例子中，网格将创建尽可能多的列，这些列的宽度至少为 200px，但可以扩展以填充剩余空间。如果没有足够的项目来填满所有列，空列将折叠为 0 宽度。
国际化 (i18n) 和本地化 (l10n) 的考量
在为全球受众设计布局时，考虑不同语言和书写方向的影响非常重要。不同语言的文本长度可能有很大差异，如果轨道尺寸配置不当，可能会影响布局。以下是设计国际化布局的一些技巧：
- 使用相对单位： 优先使用像
em、rem和百分比这样的相对单位，而不是像素等固定单位，以允许文本根据用户的字体大小偏好进行缩放。 - 内在尺寸： 利用像
min-content、max-content和fit-content()这样的内在尺寸关键词，确保轨道能适应内容的尺寸，无论使用何种语言。 - 逻辑属性： 使用像
inline-start和inline-end这样的逻辑属性，而不是像left和right这样的物理属性，以同时支持从左到右 (LTR) 和从右到左 (RTL) 的语言。 - 测试： 使用不同的语言和书写方向测试您的布局，以识别并解决任何潜在问题。模拟可能在不同语言中出现的更长的字符串。
结论
CSS Grid 轨道尺寸是创建响应式和适应性网页布局的强大而多功能的工具。通过掌握内在和外在尺寸的概念，理解 minmax() 函数，并利用 repeat() 函数，您可以构建能够优雅地适应各种内容和屏幕尺寸的布局。在为全球受众设计时，请记住考虑国际化和本地化的影响。
尝试不同的轨道尺寸技术，探索 CSS Grid 的无限可能性。通过实践和对这些概念的扎实理解，您将有足够的能力为任何项目创建复杂且用户友好的网页布局。